<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="/wutoon-trans/static/css/bootstrap/bootstrap.min.css" rel="stylesheet">

    <title>Hello, world!</title>
</head>
<body>

<div class="container">

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/wutoon-trans/index">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Book</li>
        </ol>
    </nav>
    <hr>
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="all-tab" data-bs-toggle="tab" data-bs-target="#all" type="button" role="tab" aria-controls="all" aria-selected="true">所有</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="working-tab" data-bs-toggle="tab" data-bs-target="#working" type="button" role="tab" aria-controls="working" aria-selected="false">翻译中</button>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
            <div class="container" id="all_books">
                <div class="row">
                    <div class="col-5">
                        书名
                    </div>
                    <div class="col">
                        来源
                    </div>
                    <div class="col">
                        操作
                    </div>
                </div>
            </div>

        </div>
        <div class="tab-pane fade" id="working" role="tabpanel" aria-labelledby="working-tab">工作中</div>
    </div>

</div>











<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

<!-- 包含 Popper 的 Bootstrap 集成包 -->
<script src="/wutoon-trans/static/js/jquery/jquery-3.6.1.min.js"></script>
<script src="/wutoon-trans/static/js/bootstrap/bootstrap.bundle.min.js"></script>

<script>
    $(function(){
        $.ajax({url:"/wutoon-trans/v1/book/list",
            success:function(result){
                var bookListHtml = "";
                for(var i=0; i<result.data.length; i++) {
                    bookListHtml += "<div class=\"row\">";
                    bookListHtml += "<div class=\"col-5\"><a href=\"/wutoon-trans/v1/book/detail?bookId="+result.data[i].id+"\">" + result.data[i].name +"</a></div>";
                    bookListHtml += "<div class=\"col\">" + result.data[i].source +"</div>";
                    bookListHtml += "<div class=\"col\">" + result.data[i].source +"</div>";
                    bookListHtml += "</div>";
                }
                $("#all_books").append(bookListHtml);
                console.log(bookListHtml)
            }
        });
    });
</script>
</body>
</html>
